
//baseURL
axios.defaults.baseURL='http://pcapi-xiaotuxian-front-devtest.itheima.net'


//banner部分
function banner_axios(){
   var config = {
      method: 'get',
      url: '/home/banner?distributionSite=1',
      headers: { 
         'User-Agent': 'Apifox/1.0.0 (https://apifox.com)'
      }
   };
  var img_arr=[]
  axios(config)
  .then(function (response) {
     
      var i=0
      var imgs=[]
     //图片链接
     for(i=0;i<=4;i++){
      var img= JSON.stringify(response.data.result[i].imgUrl)
         imgs.push(img)
     }
     img_arr=imgs

     class CreateBanner{
      //构造器函数(属性挂载)
      constructor(select,data){
         this.elem=document.querySelector(select);
         this.imgs=data
         console.log(this)
      }
      
      //方法
      render(){
          //渲染页面（this指向：谁调用指向谁）
          this.elem.innerHTML = this.imgs.map(item => `<li class='active'> <img src=${item} alt=""></li>`).join('');
      }
  }
      var obj=new CreateBanner('.iot_img>ul',img_arr);
      obj.render();
            
  
  
  })
  .catch(function (error) {
     console.log(error);
  });
}
banner_axios()





//nav部分
function nav_axios(){
   var config={
      method:'get',
      url:'/home/category/mutli',
      headers: { 
         'User-Agent': 'Apifox/1.0.0 (https://apifox.com)'
      }
   }
   axios(config)
   .then(res=>{
      var data=res.data.result
      
     //导航栏
      //js渲染页面
  class CreateNav{
   //构造器函数(属性挂载)
   constructor(select,data){
      this.elem=document.querySelector(select);
      this.data=data
   }
   
   //方法
   render(){
      this.data.forEach(elem=>{
         this.elem.innerHTML = this.data.map(item => `<div><a href="#"><img src=${item.icon} alt=""><span>${item.name}</span></a></div>`).join('');
      })
   }
}
  
  
   var obj=new CreateNav('nav',data);
   obj.render();
               
              
              
  
   })
}
nav_axios()

//推荐部分
function TJ_axios(url){
   var config={
      method:'get',
      url:url,
      headers: { 
         'User-Agent': 'Apifox/1.0.0 (https://apifox.com)'
      }
   }
   axios.headers
   axios(config)
   .then(res=>{
      var data=res.data.result

      class CreateTJ{
         //构造器函数(属性挂载)
         constructor(select,data){
            this.elem=document.querySelector(select);
            this.data=data
         }
         
         //方法
         render(){
            var box =document.createElement('div') ;
            box.className='iot_classification_all'
            box.innerHTML=(`<div class="iot_classification_text">
            <span style="font-size: 17px;">${this.data.title}</span>
            <span style="margin-left:10px ;color: rgb(135, 137, 138);">${this.data.subTypes[0].title}</span>
        </div>
        <div class="iot_classification_img">
              <a href="#"><img src=${this.data.bannerPicture} alt=""></a>
        </div>`)
            this.elem.appendChild(box)
         }
      }
      

      var obj=new CreateTJ('.iot_classification',data);
      obj.render();


   })
}
TJ_axios('/hot/preference?subType=&pageSize=10&page=1')
TJ_axios('/hot/inVogue?subType=&pageSize=10&page=1')
TJ_axios('/hot/oneStop?subType=&pageSize=10&page=1')
TJ_axios('/hot/new?subType=&pageSize=10&page=1')


//猜你喜欢部分

function guess_like_axios(){
   var config={
        method:'get',
        url:'/home/goods/guessLike',
        headers: { 
         'User-Agent': 'Apifox/1.0.0 (https://apifox.com)'
      }
   }

   axios(config)
   .then(res=>{
     var data=res.data.result.items

     //猜你喜欢
     class CreateLike{
      //构造器函数(属性挂载)
      constructor(select,data){
         this.elem=document.querySelector(select);
         this.data=data
      }
      
      //方法
      render(){
         this.data.forEach(elem=>{
            this.elem.innerHTML = this.data.map(item => `<div>
            <div><a href='../html/商品详细.html?url=/goods/?id=${item.id}' axios_url=/goods/?id=${item.id}><img src=${item.picture} alt=""><a/></div>
            <p>${item.desc}</p>
            <span>￥${item.price}</span>
           </div>`).join('');
         })
      }
   }
  
               var obj=new CreateLike('.iot_guess_like',data);
               obj.render();
   
     
   })
}
guess_like_axios()


//轮播图
  setTimeout(() => {
    window.lis=document.querySelectorAll('li')
     
  }, 3000);
  var index=0
 setInterval(() => {
   var lis=window.lis
   lis.forEach(l=>{
      l.className=''
   })
   lis[index].className='active'

   index+=1
   if(index>4){
      index=0
   }
 }, 3000);